<!-- components/layout-mode-card.vue -->
<template>
    <div class="layout-mode-cards">
      <!-- 🎯 遍历所有布局模式 -->
      <div
        v-for="(option, key) in layoutOptions"
        :key="key"
        :class="[
          'layout-mode-card',
          { 'active': modelValue === key },
          { 'disabled': option.disabled }
        ]"
        @click="handleModeChange(key)"
      >
        <!-- 🎯 布局预览区域 -->
        <div class="layout-preview">
          <!-- 🎨 通过插槽让父组件定义每种布局的预览内容 -->
          <slot :name="key" :layout="option"></slot>
        </div>
        
        <!-- 🎯 布局信息 -->
        <div class="layout-info">
          <div class="layout-name">{{ option.name }}</div>
          <div class="layout-desc">{{ option.description }}</div>
        </div>
        
        <!-- 🎯 选中状态指示器 -->
        <div v-if="modelValue === key" class="active-indicator">
          <el-icon><Check /></el-icon>
        </div>
        
        <!-- 🎯 禁用状态遮罩 -->
        <div v-if="option.disabled" class="disabled-mask">
          <span>{{ option.disabledReason }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { Check } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { useDevice } from '@/composables/useDevice.js'
  
  // 🎯 Props
  const props = defineProps({
    modelValue: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  })
  
  // 🎯 Emits
  const emit = defineEmits(['update:modelValue'])
  
  // 🎯 设备检测
  const { isMobile } = useDevice()
  
  // 🎯 布局选项配置
  const layoutOptions = computed(() => ({
    'vertical': {
      name: '垂直布局',
      description: '经典左侧菜单',
      disabled: false,
      disabledReason: ''
    },
    'horizontal': {
      name: '水平布局',
      description: '顶部菜单',
      disabled: isMobile.value,
      disabledReason: '移动端不支持'
    },
    'vertical-mix': {
      name: '垂直混合',
      description: '双栏菜单',
      disabled: isMobile.value,
      disabledReason: '移动端不支持'
    },
    'horizontal-mix': {
      name: '水平混合',
      description: '顶部+左侧',
      disabled: isMobile.value,
      disabledReason: '移动端不支持'
    }
  }))
  
  // 🎯 事件处理
  function handleModeChange(mode) {
    const option = layoutOptions.value[mode]
    
    // 检查是否禁用
    if (option.disabled || props.disabled) {
      ElMessage.warning(option.disabledReason || '当前模式下不可切换')
      return
    }
    
    // 发射更新事件
    emit('update:modelValue', mode)
    
    // 成功提示
    ElMessage.success(`已切换到${option.name}`)
    
    console.log('🎨 布局模式切换:', mode)
  }
  </script>
  
  <style lang="scss" scoped>
  .layout-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    
    @media (max-width: 480px) {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
  
  .layout-mode-card {
    position: relative;
    border: 2px solid var(--el-border-color-light);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s var(--el-transition-function-ease-in-out-bezier);
    background: var(--el-bg-color);
    overflow: hidden;
    
    &:hover {
      border-color: var(--el-color-primary-light-5);
      transform: translateY(-2px);
      box-shadow: var(--el-box-shadow-light);
    }
    
    &.active {
      border-color: var(--el-color-primary);
      background: var(--el-color-primary-light-9);
      box-shadow: var(--el-box-shadow);
    }
    
    &.disabled {
      opacity: 0.6;
      cursor: not-allowed;
      
      &:hover {
        transform: none;
        border-color: var(--el-border-color-light);
        box-shadow: none;
      }
    }
    
    // 🎯 布局预览区域
    .layout-preview {
      height: 80px;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 12px;
      background: var(--el-bg-color-page);
      border: 1px solid var(--el-border-color-lighter);
    }
    
    // 🎯 布局信息
    .layout-info {
      text-align: center;
      
      .layout-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 4px;
      }
      
      .layout-desc {
        font-size: 12px;
        color: var(--el-text-color-regular);
      }
    }
    
    // 🎯 选中状态指示器
    .active-indicator {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      background: var(--el-color-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      box-shadow: var(--el-box-shadow-light);
    }
    
    // 🎯 禁用状态遮罩
    .disabled-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
    }
  }
  
  // 🎯 深色模式适配
  .dark {
    .layout-mode-card {
      &.active {
        background: var(--el-color-primary-dark-2);
      }
      
      .layout-preview {
        border-color: var(--el-border-color-darker);
      }
    }
  }
  </style>